<!-- 商城 - 购物车组件（本地缓存版） -->
<template>
	<view class="vk-mall-goods-cart" v-if="mounted">
		<!-- 无数据时 ~-->
		<view v-if="!list || list.length == 0" class="empty-box">
			<u-empty text="购物车空空如也" mode="car" icon-size="180" color="#333333" margin-top="200" font-size="34"></u-empty>
			<view class="text text2">再忙也要记得买点什么犒赏自己~</view>
			<view class="text text3" @click="toHome">随便逛逛</view>
		</view>
		<!-- 有数据时 -->
		<view v-else>
			<view style="padding: 20rpx;width: 100%;" >
				<view v-for="(item, index) in list" :key="item.sku_id" class="cart-item">
					<u-swipe-action
						:show="item.sku_id === swipe.sku_id"
						:index="index"
						:options="swipe.options"
						bgColor="var(--bgcolor)"
						@click="rightItem"
						@open="swipe.sku_id = item.sku_id"
					>
						<view class="swipe-item" :class="item.sku_id === swipe.sku_id ? 'current':''">
							<view class="item-top" @click="moreBtn(index)">
								<u-icon name="more-dot-fill" color="#9a9a9a"></u-icon>
							</view>
							<view class="item-main">
								<!-- 通过点击view来模拟点击多选框，增大可点击区域，提升用户体验，否则用户可能会因为多选框太小而造成没点到的情况 -->
								<view class="checkbox-view" @click="checkboxClick(index)">
									<u-checkbox :value="item.action_checked" :name="index" active-color="var(--main)" shape="circle" ></u-checkbox>
								</view>
								<image mode="aspectFill" :src="item.image" />
								<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
								<view class="name-wrap">
									<text class="goods-name u-line-2">
										<u-tag v-if="item.goods_type === 1" text="卡券" type="error" size="mini" style="margin-right: 6rpx;" />
										<text>{{ item.goods_name }}</text>
									</text>
									<text class="sku-name">{{ item.sku_name.length > 14 ? item.sku_name.substring(0,14)+"..." : item.sku_name }} </text>
									<!-- <u-input type="select" :value="item.sku_name" height="50" backgroundColor="#f7f7f7" padding="0 20rpx" :custom-style="{ fontSize: '24rpx', }"></u-input> -->
									<view class="price-box">
										<view class="sku-price">¥{{ vk.pubfn.priceFilter(item.price) }}</view>
										<view class="input-num">
											<vk-data-input-number-box
												v-model="list[index].buy_num"
												input-width="90"
												:min="item.cart_rule.min || 1"
												:max="cartRuleMax(item)"
												:step="item.cart_rule.step || 1"
												:step-strictly="item.cart_rule.step_strictly"
												:index="index"
												:positive-integer="true"
											></vk-data-input-number-box>
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action>
				</view>
				<!-- 底部安全区域 -->
				<view class="safe-area-inset-bottom"></view>
			</view>

			<!-- 底部按钮 -->
			<view class="navigation" :style="'bottom:'+footerHeight+'px'">
				<view class="navigation-main">
					<view class="navigation-main-left">
						<u-checkbox :value="isCheckedAllCom" @change="checkboxAllChange" name="checkedAll" active-color="var(--main)" shape="circle" >全选</u-checkbox>
					</view>
					<view class="navigation-main-right">
						<view><text class="total-text">合计</text> <text class="price"> ¥{{ buyPriceTotalCom }}</text></view>
						<view class="num-text">您已选 {{ buyNumCom }} 件商品</view>
						<view class="navigation-buy">
							<text class="buy-btn" v-if="buyNumCom>0" @click="settlement">买</text>
							<text class="buy-btn disable" v-else>买</text>
						</view>
					</view>
				</view>
				<view class="navigation-inset-bottom"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "vk-mall-goods-cart",
	props: {
		tabbarHeight:{
			Type:Number,
			default:0
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			list:[

			// 	{ sku_id:"001", goods_name:"商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称1", sku_name:"商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称",price:59900, image:"https://img.alicdn.com/imgextra/i1/121022687/O1CN01xowpQk1VigvH5vZVp_!!121022687.jpg",  buy_num:2, cart_rule:{}, action_checked:true, stock:5, } ,
			// 	{ sku_id:"002", goods_name:"商品名称2", sku_name:"100kg", price:10000, image:"https://img.alicdn.com/imgextra/i1/121022687/O1CN01xowpQk1VigvH5vZVp_!!121022687.jpg",  buy_num:1, cart_rule:{}, action_checked:true, stock:99999 },
			// 	{ sku_id:"003", goods_name:"商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称1", sku_name:"100kg",price:59900, image:"https://img.alicdn.com/imgextra/i1/121022687/O1CN01xowpQk1VigvH5vZVp_!!121022687.jpg",  buy_num:3, cart_rule:{}, action_checked:true, stock:99999 } ,
			// 	{ sku_id:"004", goods_name:"商品名称2", sku_name:"100kg", price:10000, image:"https://img.alicdn.com/imgextra/i1/121022687/O1CN01xowpQk1VigvH5vZVp_!!121022687.jpg",  buy_num:1, cart_rule:{}, action_checked:true, stock:99999 },
			// 	{ sku_id:"005", goods_name:"商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称1", sku_name:"100kg",price:59900, image:"https://img.alicdn.com/imgextra/i1/121022687/O1CN01xowpQk1VigvH5vZVp_!!121022687.jpg",  buy_num:4, cart_rule:{}, action_checked:true, stock:99999 } ,
			// 	{ sku_id:"006", goods_name:"商品名称2", sku_name:"100kg", price:10000, image:"https://img.alicdn.com/imgextra/i1/121022687/O1CN01xowpQk1VigvH5vZVp_!!121022687.jpg",  buy_num:1, cart_rule:{}, action_checked:true, stock:99999 },
			// 	{ sku_id:"007", goods_name:"商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称1", sku_name:"100kg",price:59900, image:"https://img.alicdn.com/imgextra/i1/121022687/O1CN01xowpQk1VigvH5vZVp_!!121022687.jpg",  buy_num:10, cart_rule:{}, action_checked:true, stock:99999 } ,
			// 	{ sku_id:"008", goods_name:"商品名称2", sku_name:"100kg", price:10000, image:"https://img.alicdn.com/imgextra/i1/121022687/O1CN01xowpQk1VigvH5vZVp_!!121022687.jpg", buy_num:1, cart_rule:{}, action_checked:true, stock:99999 },
			// 	{ sku_id:"009", goods_name:"商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称1", sku_name:"100kg",price:59900, image:"https://img.alicdn.com/imgextra/i1/121022687/O1CN01xowpQk1VigvH5vZVp_!!121022687.jpg",  buy_num:1, cart_rule:{}, action_checked:true, stock:99999 } ,
			// 	{ sku_id:"010", goods_name:"商品名称2", sku_name:"100kg", price:10000, image:"https://img.alicdn.com/imgextra/i1/121022687/O1CN01xowpQk1VigvH5vZVp_!!121022687.jpg", buy_num:1, cart_rule:{}, action_checked:true, stock:99999 },

			],
			swipe:{
				sku_id:"",
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#ff705e',
							color:'#ffffff',
							borderRadius: '0 20rpx 20rpx 0'
						}
					}
				],
			},
			footerHeight: 0,
			navigationBarHeight: 0,
			mounted: false,
			isTemp: false
		};
	},
	mounted() {
		this.initPage();
		this.$emit("mounted");
	},
	methods: {
		// 初始化宽高
		initPage() {
			let that = this;
			// #ifdef H5
			that.footerHeight = that.tabbarHeight;
			// #endif
			// #ifndef H5
			that.navigationBarHeight = 188;
			// #endif
		},
		// 初始化数据
		init(options){
			let {
				order_no
			} = options;
			let that = this;
			if (order_no) {
				that.list = uni.vk.myfn.cart.getList("temp"); // 从临时购物车中获取
				that.isTemp = true;
			} else {
				that.list = uni.vk.myfn.cart.getList("list"); // 从通用购物车中获取
				that.calcCartNum();
				that.isTemp = false;
			}
			that.getSkuData(); // 重新获取最新数据
			that.mounted = true;
		},
		toHome(path){
			uni.vk.navigateToHome();
		},
		cartRuleMax(item){
			let { cart_rule={}, stock } = item;
			let { max = 99999 } = cart_rule;
			return max > stock ? stock : max;
		},
		moreBtn(index){
			let that = this;
			uni.vk.showActionSheet({
				list:["删除"],
				color:"#000000",
				success:(res) => {
					if(res.index==0){
						// 删除
						that.removeItem(index);
					}
				}
			});
		},
		// 功能按钮点击
		rightItem(index, index1) {
			let that = this;
			if(index1 == 0) {
				// 删除
				that.removeItem(index);
			}
		},
		// 删除某一个商品
		removeItem(index){
			let that = this;
			setTimeout(() => {
				that.swipe.sku_id = "";
			}, 500);
			if (that.list && that.list.length > 0) {
				that.list.splice(index, 1);
			}
		},
		checkboxClick(index){
			let that = this;
			let list = that.list;
			that.$set(list[index],"action_checked",!list[index].action_checked);
		},
		checkboxAllChange(e){
			let that = this;
			let list = that.list;
			for(let i in list){
				that.$set(list[i],"action_checked",e.value);
			}
		},
		// 保存到本地购物车缓存
		setCart(list){
			let key = this.isTemp ? "temp" : "list";
			if (key === "temp") {
				uni.vk.vuex.dispatch('$cart/setTempCart', list);
			} else {
				uni.vk.vuex.dispatch('$cart/setCart', list);
			}
		},
		// 去结算
		settlement(){
			let that = this;
			let { buyNumCom } = that;
			if (buyNumCom>0){
				let mode = this.isTemp ? "tempCart" : "cart";
				uni.vk.navigateTo(`/pages/goods/goods-order-confirm?mode=${mode}`);
			}
		},
		calcCartNum(num){
			let that = this;
			if (typeof num === "undefined") num = uni.vk.myfn.cart.getTotal();
			if (num>0){
				uni.setTabBarBadge({
					index: 2,
					text: num.toString()
				});
			} else {
				uni.removeTabBarBadge({
					index: 2
				});
			}
		},
		// 请求云端获取最新的商品信息
		async getSkuData(){
			let that = this;
			let { list } = that;
			that.list = await uni.vk.myfn.cart.getSkuData(list);
		}
	},
	// 监听器
	watch:{
		list:{
			deep: true,
			handler(newVal, oldVal){
				this.setCart(newVal);
			}
		},
		cartNumCom: {
			immediate: true,
			handler(newVal) {
				if (!this.isTemp) {
					this.calcCartNum(newVal);
				}
			}
		}
	},
	// 计算属性
	computed: {
		// 购物车内商品数量合计
		cartNumCom(){
			let key = this.isTemp ? "temp" : "list";
			return uni.vk.myfn.cart.getTotal(key);
		},
		// 获取购物车总商品数量(已勾选的)
		buyNumCom(){
			let key = this.isTemp ? "temp" : "list";
			return uni.vk.myfn.cart.getBuyNumTotal(key);
		},
		buyPriceTotalCom(){
			let key = this.isTemp ? "temp" : "list";
			return uni.vk.myfn.cart.getBuyPriceTotal(key);
		},
		// 是否全选
		isCheckedAllCom(){
			let that = this;
			let { list=[] } = that;
			let checked = true;
			list.map((item, index) => {
				if (!item.action_checked) {
					checked = false;
				}
			});
			return checked;
		}
	}
};
</script>

<style lang="scss" scoped>
	.vk-mall-goods-cart{
		width: 100%;
		background-color: var(--bgcolor);
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
	}
	.empty-box{
		display: flex;
		align-items: center;
		flex-direction: column;
		.text{
			letter-spacing: 2rpx;
		}
		.text2{
			margin-top: 26rpx;
			color: #c0c4cc;
			font-size: 24rpx;
		}
		.text3{
			margin-top: 60rpx;
			font-size: 34rpx;
			box-sizing: border-box;
			text-align: center;
			color: #ffffff;
			background-color: var(--main);
			padding: 14rpx 80rpx;
			border-radius: 50rpx;
		}
	}
	.cart-item{
		margin-bottom: 20rpx;
		.swipe-item{
			border-radius: 20rpx;
			padding: 20rpx;
			background-color: #ffffff;
			.item-top{
				display: flex;
				justify-content: flex-end;
			}
			.item-main{
				display: flex;
			}
			.checkbox-view{
				padding-top: 50rpx;
			}
			image{
				width: 140rpx;
				height: 140rpx;
				flex: 0 0 140rpx;
				margin-right: 20rpx;
				border-radius: 12rpx;
			}
			.name-wrap{
				flex: 1;
				.goods-name {
					text-align: left;
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
					margin-bottom: 20rpx;
				}
				.sku-name{
					font-size: 24rpx;
					background-color: #f7f7f7;
					height: 50rpx;
					padding: 0 20rpx;
					display: inline-flex;
					align-items: center;
					width: auto;
					color: #9a9a9a;
					border-radius: 10rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.sku-name:after{
					margin-left: 10rpx;
					font-family: "uicon-iconfont";
					content: "\e60d";
				}
				.price-box{
					display: flex;
					margin-top: 20rpx;
					.sku-price{
						flex: 1;
						font-weight: bold;
						font-size: 36rpx;
						color: var(--main);
					}
					.input-num{
					}
				}
			}
		}
		.swipe-item.current{
			border-radius: 20rpx 0 0 20rpx;
		}
	}

	.navigation {
		position: fixed;
		bottom: 0;
		border-top: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		width: 100%;
		z-index: 99;
		.navigation-main{
			display: flex;
			position: relative;
			padding: 30rpx 20rpx;
			.navigation-main-left {
				display: flex;
				align-items: center;
				font-size: 20rpx;
			}
			.navigation-main-right {
				display: flex;
				flex-flow: column;
				align-items: flex-end;
				font-size: 28rpx;
				flex: 1;
				color: #9a9a9a;
				text-align: right;
				padding-right: 180rpx;
				.total-text{
					margin-right: 10rpx;
					font-size: 24rpx;
				}
				.price{
					color:var(--main);
					font-size: 32rpx;
					font-weight: 600;
				}
				.num-text{
					font-size: 26rpx;
				}
				.navigation-buy{
					position: absolute;
					top:-26rpx;
					right: 0;
					z-index: 2;
					width: 180rpx;
					height: 180rpx;
					border-radius: 50%;
					background-color: #FFFFFF;
					border-top: solid 2rpx #f2f2f2;
					border-left: solid 2rpx #FFFFFF;
					border-right: solid 2rpx #FFFFFF;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 40rpx;
					font-weight: bold;
					.buy-btn{
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						background-color: var(--main);
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.buy-btn:active{
						filter: grayscale(50%);
					}
					.buy-btn.disable{
						filter: grayscale(90%);
					}
				}
			}
		}

		.navigation-inset-bottom{
			height: 0;
			height: constant(safe-area-inset-bottom);
			height: env(safe-area-inset-bottom);
			display: block;
			width: 100%;
		}
	}

	/* 底部安全区域 */
	.safe-area-inset-bottom{
		height: calc(140rpx);
		height: calc(140rpx + constant(safe-area-inset-bottom));
		height: calc(140rpx + env(safe-area-inset-bottom));
		display: block;
	}

</style>
